<style scoped>
html {
  font-size: 12px;
}

.panel {
  box-shadow: 4px 4px 4px #ddd;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #dfdfdf;
  background-color: #fff;
  border-radius: 8px;
}

.home_bg {
  padding: 20px 12px;
  /* background-color: #fafafa; */
}

.author-info-block {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
}

.avatar {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #eee;
}

.avatar img {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 100%;
  height: 100%;
}

.title .name {
  font-size: 0.75rem;
  font-weight: bold;
  margin-bottom: 0.2rem;
}

.title .desc {
  /* font-size: 0.6rem; */
  font-size: 10px;
  display: flex;
  flex-wrap: wrap;
}

.tag {
  background: #fafafa;
  color: #000000a6;
  padding: 0px 4px;
  border-radius: 4px;
  border: 1px dashed #c1c1c1;
  margin-right: 0.3rem;
  margin-bottom: 4px;
  font-size: 10px;
  display: inline-block;
}

.content-info-block {
  font-size: 0.75rem;
}

blockquote {
  padding: 1.4rem 0.6rem;
  border-top: 1px dashed #657b83;
  border-bottom: 1px dashed #657b83;
  border-right: 1px dashed #657b83;
  border-left: 2px solid #657b83;
  background-color: #ecefef;
  border-radius: 0.3rem;
  position: relative;
  /* background-image: url(../assets/quote_open.png);
  background-position: 15px 10px;
  background-repeat: no-repeat;
  background-size: 18px; */
}

blockquote i.icon-shangyinhao {
  position: absolute;
  top: 0;
  left: 6px;
  color: #c9c9c9;
}

blockquote i.icon-xiayinhao {
  position: absolute;
  bottom: 0;
  right: 6px;
  color: #c9c9c9;
}

blockquote pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}



ul.comment-list {
  padding: 0px 10px 10px 20px;
  list-style: circle;
  color: #8d8d8d;
}

/* 头部区域 */
.header {
  padding: 60px 20px 20px 20px;
  background-color: #fafafa;
  border-bottom-left-radius: 240px;
  border-bottom-right-radius: 240px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
}

.header h2 {
  text-align: center;
  letter-spacing: 0.1rem;
  position: relative;
  font-size: 2.4rem;
  color: #657b83;
  font-weight: normal;
}

.header h2 span.tag {
  position: absolute;
  top: -1.6rem;
  left: 0;
  font-size: 0.8rem;
  border: 1px solid #ccc;
  padding: 2px 8px;
  letter-spacing: 0;
  font-family: initial;
  border-radius: 0;
  color: #fff;
  background-color: #657b83;
  font-weight: bold;
  border-radius: 6px;
}

.statement {
  font-size: 0.8rem;
  color: #999;
  margin: 10px 12px 10px 12px;
  border: 1.5px dashed #ccc;
  padding: 8px;
  font-family: cursive;
}

.contact {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 0.8rem;
  color: #657b83;
  font-family: cursive;
}

.contact strong{
  font-size: .9em;
}

.contact img {
  width: 80px;
  height: 80px;
}

.socail-logo {
  height: 25px;
  line-height: 25px;
}

/* 公职招聘 */
.government-job{
  background-image: url('./../assets/bg.jpg');
  background-size: 60%;
  padding: 14px 10px 4px 10px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 5px #ff786c;
}

.government-job .content{
  background-color: #fff;
  border: 1px dashed #ff786c;
  padding: 0px 10px 0;
}

.government-job .job-title{
  background-color: #ff786c;
  color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-top: 3px;
  margin-bottom: 20px;
  padding: 4px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  box-shadow: 0 0 0 2px #fafafa, 0 0 0 4px #ff786c;
}

.government-job .content-item{
  margin-bottom: 18px;
  padding: 0 8px;
}

.government-job .content-item .title{
  color: #757a7c;
  font-size: 13px;
  position: relative;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.government-job .content-item .context{
  font-size: 12px;
  color: #657b83;
}

.triangle-right{
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #757a7c;
  border-bottom: 5px solid transparent;
  margin-right: 6px;
}

.government-job .footer{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.government-job .footer .tag{
  padding: 2px 8px;
  border-color: #ff786c;
  color: #ff786c;
  border-style: solid;
  font-size: 12px;
}

/* 原创招聘 */
.original-panel{
  background-color: #dfe5ea;
  padding-bottom: 6px;
  border-radius: 6px;
  box-shadow: 3px 3px 5px #ccc;
  margin-left: 8px;
  margin-bottom: 20px;
}

.original-panel-item{
  border: 1px solid #ccc;
  border-radius: 4px;
  position: relative;
  width: 100%;
  right: 8px;
  background-color: #fff;
}

.o-header{
  top: -6px;
}

.o-content{
  padding: 4px 6px;
  box-sizing: border-box;
}

.o-header .title{
  border-bottom: 1px dashed #ccc;
  display: flex;
  padding: 6px 6px;
  align-items: center;
  background-color: #71909c;
  color: #fff;
}

.o-header .title .avatar{
  height: 30px;
  width: 30px;
  border-radius: 10px;
  border:1px solid #f1f1f1;
  background-image: url('https://image.gxrc.com/EnterpriseMaterial/Logo/80664_c2d573e2-b3be-4eaa-b965-9fbd76b9d91b.png');
  background-size: cover;
}

.o-header .title .name{
  font-size: 16px;
  letter-spacing: 2px;
}

.o-header .info{
  color: #657b83;
  padding: 8px 6px;
}

.info-item{
  padding: 2px 6px;
  display: flex;
  font-size: 12px;
  align-items: center;
}

.info-item i{
  font-size: 14px;
  margin-right: 6px;
}

.info-item p{
  line-height: 18px;
}

.job-item{
  margin-bottom: 8px;
  padding: 6px 8px;
}

.job-item-title{
  padding: 2px 10px;
  font-size: 12px;
  height: 16px;
  line-height: 16px;
  background-color: #71909c;
  color: #fff;
  display: inline-block;
  border: 1px solid #657b83;
  box-shadow: 0px 0px 4px 0px #657b83;
  margin-bottom: 6px;
}

.job-item-text{
  font-size: 12px;
  color:#657b83
}

.job-item-text ul{
  margin-left: 16px;
}

.original-panel .tag-container{
  display: flex;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #71909c;
}

.tag-container .tag{
  border-color: #71909c;
  color: #71909c;
  border-style: solid;
  box-shadow: 2px 2px 2px #71909c;
  margin-right: 8px;
}

span.circle{
  border: 1px solid #999;
  display: inline-block;
  border-radius: 50%;
  padding: 0 4px;
  font-size: 10px;
}

span.circle.active {
  color: #fff;
  background-color: #a9a9a9;
}
</style>

<style>
ul {
    list-style: none;
}
</style>

<template>
  <div>
    <div class="header">
      <h2>
        <span class="css22429f878b2075c">岑溪招聘简报</span>
        <span class="tag" v-if="!star">{{new Date() | momentFormat('YYYY-MM-DD')}}</span>
        <span class="tag" v-else>星选招聘{{starRange}}</span>
      </h2>
      <div class="statement">
        <p style="margin-bottom: 8px;">
          <b>发布周期</b>：周
            <span class="circle">一</span>
            <span class="circle active">二</span>
            <span class="circle">三</span>
            <span class="circle active">四</span>
            <span class="circle">五</span>
            <span class="circle">六</span>
            <span class="circle active">日</span>
        </p>
        <p>
          <b>免责声明</b>：站外招聘信息均从网络获取，请注意辨别信息的真实性，如有纠纷平台不负责任，最终解释权归平台所有。
        </p>
      </div>
      <div class="contact">
        <img src="../assets/private_wechart_qrcode.jpg"></img>
        <div>扫描二维码添加微信好友</div>
        <div><i
            class="icon iconfont icon-weibo socail-logo"
            style="color: #b65757;"
          ></i><span>新浪微博：</span><strong>岑溪关注</strong></div>
        <div><i
            class="icon iconfont icon-changyonglogo28 socail-logo"
            style="color: green;"
          ></i><span>微信公众号：</span><strong>岑人启事</strong></div>
      </div>
    </div>
    <div class="home_bg">
      
      <!-- 公职招聘 -->
      <template  v-if="govList.length > 0">
        <div class="government-job" v-for="(job,jobIndex) in govList" :key="'gov_' + jobIndex">
          <div class="content">
            <div class="job-title">{{job.title}}</div>
            <div class="content-item" v-for="(paragraph,pIndex) in job.paragraphList" :key="'gov_title_'+pIndex">
              <div class="title">
                <div class="triangle-right"></div>
                <span>{{paragraph.title}}</span>
              </div>
              <div class="context" v-html="paragraph.context"></div>
            </div>
          </div>
          <div class="footer">
            <div class="tag">公职招聘</div>
            <div class="tag">{{job.oid.substr(job.oid.length - 6,job.oid.length)}}</div>
            <div class="tag">{{job.cutoffTime | ymdFormat('MM月DD日截止') }}</div>
          </div>
        </div>
      </template>

      <!-- 原创招聘 -->
      <template  v-if="orgList.length > 0">
        <original v-for="(job,jobIndex) in orgList" :key="'org_'+jobIndex" :job="job"/>
        <!-- <div class="original-panel"  v-for="(job,jobIndex) in orgList" :key="jobIndex">
          <div class="author-info-block">
            <div class="avatar">岑</div>
            <div class="title">
              <div class="name">{{job.author}}</div>
            </div>
          </div>
          <div class="content-info-block">
            <blockquote>
              <i class="icon iconfont icon-shangyinhao"></i>
              <i class="icon iconfont icon-xiayinhao"></i>
              <p v-html="job.text"></p>
            </blockquote>
          </div>
        </div> -->
      </template>

      <!-- 站外招聘 -->
      <template v-if="spiderList.length > 0">
        <div
          class="panel"
          v-for="(job,jobIndex) in spiderList" :key="'spider_'+jobIndex"
        >
          <div class="author-info-block">
            <div class="avatar">
              <img src="../assets/crqs.png">
            </div>
            <div class="title">
              <div class="name">岑人启事招聘小助手</div>
              <div class="desc">
                <div class="tag">{{job.author}}</div>
                <div class="tag">{{job.oid.substr(job.oid.length - 6,job.oid.length)}}</div>
                <div class="tag">{{job.createTime | ymdFormat('MM.DD发布')}}</div>
              </div>
            </div>
          </div>
          <div class="content-info-block">
            <blockquote>
              <i class="icon iconfont icon-shangyinhao"></i>
              <i class="icon iconfont icon-xiayinhao"></i>
              <h4 v-if="job.title">『{{job.title}}』</h4>
              <p v-html="job.text"></p>
            </blockquote>
            <p
              style="margin-top: 5px;"
              v-if="job.comment_list.length > 1"
            >『评论回帖』</p>
            <ul
              class="comment-list"
              v-if="job.comment_list.length > 1"
            >
              <li
                v-for="(comment,i) in job.comment_list"
                :key="'comment_'+i"
              >{{comment ? comment : ''}}</li>
            </ul>

          </div>
        </div>
      </template>

    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Group, Cell } from "vux";
import jobGoverment from '@/components/jobGoverment';
import original from '@/components/previewOriginal';

import axios from "axios";

const axiosForm = axios.create({
  timeout: 1000 * 60 * 8, // request timeout
  headers: {
    "Content-Type": "application/json"
  }
});

export default {
  components: {
    Group,
    Cell,
    jobGoverment,
    original
  },
  data() {
    return {
      govList: [],
      orgList: [],
      spiderList: [],
      star: false,
      startTime: null,
    };
  },
  computed:{
    starRange() {
      let momentFormat = Vue.filter('ymdFormat');
      let endTime = this.startTime + (86400000 * 6);
      let startDay = momentFormat(new Date(this.startTime),'MM-DD');
      let endDay = momentFormat(new Date(endTime),'MM-DD');
      return '（' + startDay + '至' + endDay + '）';
    }
  },
  methods: {
    getUrlParamStr(name) { //封装方法
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
      var r = window.location.search.substr(1).match(reg); //匹配目标参数
      if (r != null) return decodeURI(r[2]);
      return null; //返回参数值
    }
  },
  mounted() {
    this.star = this.getUrlParamStr('star') == 'true';
    this.startTime = parseInt(this.getUrlParamStr('startTime'));
    // console.log(this.star,this.startTime);

    axiosForm.get('http://127.0.0.1:7001/', {
      params: {
        status: ['CONFIRM'],
        // type: ['SPIDER'],
        searchDate: new Date().getTime()
      }
    }).then((res) => {
      console.log(res.data);
      // this.jobList = res.data.jobList;
      this.govList = res.data.jobList.govList;
      this.orgList = res.data.jobList.orgList;
      this.spiderList = res.data.jobList.spiderList;
    });
  }
};
</script>

<style lang="less">
.vux-demo {
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px;
}
</style>
